<template>
    <div class="myBaby">
        <!--宝贝分类管理头部选择-->
        <div class="myBabyHeader noselect">
            <p :class="HeaderIndex == 1? 'myBabyHeaderPS':''" @click="HeaderSelect(1)">全部宝贝</p>
            <p :class="HeaderIndex == 2? 'myBabyHeaderPS':''" @click="HeaderSelect(2)">出售中的宝贝</p>
            <p :class="HeaderIndex == 3? 'myBabyHeaderPS':''" @click="HeaderSelect(3)">仓库中的宝贝</p>
        </div>
        <!--宝贝分类管理中间搜索-->
        <div class="myBabyQuery" v-if="isDataList">
            <!--搜索第一行-->
            <div class="myBabyQueryOne">
                <div class="QueryOneDiv">
                    <span>商品标题</span>
                    <input type="text">
                </div>
                <div class="QueryOneDiv">
                    <span>店铺分类</span>
                    <input type="text">
                </div>
                <div class="QueryOneDiv">
                    <span>商品货号</span>
                    <input type="text">
                </div>
                <div class="QueryOneDiv QueryOneDivPrice">
                    <span>价格</span>
                    <input id="myBabyPriceA" type="text">
                    <span>--</span>
                    <input id="myBabyPriceB" type="text">
                </div>
            </div>
            <!--搜索第二行-->
            <div class="myBabyQueryTwo noselect">
                <span>查询</span>
                <span>重置</span>
            </div>
            <!--搜索第三行-->
            <div class="myBabyQueryThree noselect">
                <span @click="lotsDelete(selectNum)" :class="isSelectDelete?'myBabyQueryThreeIsDelete2':'myBabyQueryThreeIsDelete1'">批量删除</span>
                <span>已选商品（ {{selectNum}} ）</span>
                <span>共 3 件商品</span>
            </div>
        </div>
        <!--宝贝分类管理显示内容-->
        <div class="myBabyContent" v-if="isDataList">
            <el-table class="myBabyDataList" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" :header-cell-style="{background:'#E0E0E0',padding:'5px 0'}">
                <!-- 选择栏 -->
                <el-table-column type="selection" min-width="10%">
                </el-table-column>
                <!-- 商品名称栏 -->
                <el-table-column prop="date" label="商品名称" min-width="35%">
                    <template slot-scope="scope">
                        <div class="ListOne">
                            <img class="ListOneLeft" :src="scope.row.date" alt="">
                            <div class="ListOneRight">
                                <p @click="updataData(scope.row)" style="cursor: pointer;">{{scope.row.name}}<i class="iconfont icon-qianbi"></i></p>
                                <p>ID：415811561256</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <!--价格栏 -->
                <el-table-column prop="price" label="价格" sortable min-width="8%">
                    <template slot-scope="scope">
                        <div class="ListTwo">
                            <p @click="updataData(scope.row)" style="cursor: pointer;">¥&nbsp{{scope.row.price}} <i class="iconfont icon-qianbi"></i></p>
                        </div>
                    </template>
                </el-table-column>
                <!-- 库存栏 -->
                <el-table-column prop="province" label="库存" sortable min-width="9%">
                    <template slot-scope="scope">
                        <p @click="updataData(scope.row)" style="cursor: pointer;">{{scope.row.province}} &nbsp<i class="iconfont icon-qianbi"></i></p>
                    </template>
                </el-table-column>
                 <!--创建时间栏 -->
                <el-table-column prop="address" label="创建时间" sortable min-width="12%">
                    <template slot-scope="scope">
                        <div class="ListThree">
                            <p class="ListThreeA">{{scope.row.address}}</p>
                            <p class="ListThreeB" v-if="scope.row.isShow == '出售中'">出售中</p>
                            <p class="ListThreeC" v-else-if="scope.row.isShow != '出售中'">仓库中</p>
                            <p class="ListThreeD" v-else>未定义</p>
                        </div>
                    </template>
                </el-table-column>
                <!-- 操作栏 -->
                <el-table-column label="操作" min-width="10%">
                    <template slot-scope="scope">
                        <div class="ListFour">
                            <p type="text" size="small"><span @click="updataData(scope.row)">编辑商品</span></p>
                            <p v-if="scope.row.isShow == '出售中'"type="text" size="small"><span @click="handleClick(scope.row)">下架商品</span></p>
                            <p v-if="scope.row.isShow != '出售中'"type="text" size="small"><span @click="handleClick(scope.row)">立即上架</span></p>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
                    id="pagination"
                    style="text-align: right;"
                    background
                    layout="prev, pager, next"
                    :page-size= "4"
                    :page-count="4"
                    prev-text="  上一页  "
                    next-text="下一页  "
                    @current-change="handleCurrentChange"
                    :total="25">
            </el-pagination>
        </div>
        <!--修改商品弹框-->
        <div v-if="isUpDataShow" class="updataShop">
            <div class="updataContent">
                <p class="updataContentA">
                    <span>编辑商品</span>
                    <span>
                        <i @click="UpDataShowN" class="el-icon-close"></i>
                    </span>
                </p>
                <div class="updataContentB">
                    <p>商品标题</p>
                    <input id="updataShowShopname" type="text">
                </div>
                <div class="updataContentC">
                    <p>价格</p>
                    <input id="updataShowPrice" type="text">元
                </div>
                <div class="updataContentD">
                    <p>库存</p>
                    <input id="updataShowNumber" type="text">
                </div>
                <div class="updataContentE">
                    <span @click="UpDataSubmit">提交</span>
                    <span @click="UpDataShowN">取消</span>
                </div>
            </div>
        </div>
        <div class="noDataList" v-if="!isDataList">
            <img class="noDataListA" src="./../../assets/img/myYC/myBabyNoDataList.png" alt="">
            <p class="noDataListB">暂无商品</p>
            <p class="noDataListC" @click="toGoodsOn">发布商品</p>
        </div>
        <!-- 编辑商品提交成功弹框 -->
        <div :class="isUpDataSuccess?'upDataSuccessBlock':'upDataSuccessNone'">
            <i class="el-icon-success"></i>
            <p>价格修改成功</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "myBaby",
        data(){
            return {
                // 宝贝分类管理,头部选择下标
                HeaderIndex:1,
                // 是否有数据
                isDataList: true,
                // 数据表格数据
                tableData: [{
                    date: 'http://img.redocn.com/sheji/20141219/zhongguofengdaodeliyizhanbanzhijing_3744115.jpg',
                    name: 'UN自制 宽松条纹开衫上衣时尚感蝴蝶结飘带防晒薄女',
                    province: '10',
                    price: '12',
                    isShow:"出售中",
                    address: '2019-06-29 09:14',
                    zip: 200333
                }, {
                    date: 'http://img.redocn.com/sheji/20141219/zhongguofengdaodeliyizhanbanzhijing_3744115.jpg',
                    name: 'UN自制 宽松条纹开衫上衣时尚感蝴蝶结飘带防晒薄女',
                    province: '103',
                    price: '23',
                    isShow:"仓库中",
                    address: '2019-06-29 09:14',
                    zip: 200333
                }, {
                    date: 'http://img.redocn.com/sheji/20141219/zhongguofengdaodeliyizhanbanzhijing_3744115.jpg',
                    name: 'UN自制 宽松条纹开衫上衣时尚感蝴蝶结飘带防晒薄女',
                    province: '1100',
                    price: '21',
                    isShow:"出售中",
                    address: '2019-06-29 09:14',
                    zip: 200333
                }, {
                    date: 'http://img.redocn.com/sheji/20141219/zhongguofengdaodeliyizhanbanzhijing_3744115.jpg',
                    name: 'UN自制 宽松条纹开衫上衣时尚感蝴蝶结飘带防晒薄女',
                    province: '410',
                    price: '123',
                    isShow:"出售中",
                    address: '2019-06-29 09:14',
                    zip: 200333
                },{},{},{},{},{},{}],
                // 数据表格选择框,选中几个
                selectNum: 0,
                // 是否可以批量删除
                isSelectDelete: false,
                // 是否显示编辑商品框
                isUpDataShow:false,
                // 是否显示编辑商品提交成功弹框
                isUpDataSuccess: false,
            }
        },
        methods:{
            // 数据选择
            handleSelectionChange(val) {
                console.log(val);
                this.selectNum = val.length;
                if(val.length != 0){
                    this.isSelectDelete = true;
                }else{
                    this.isSelectDelete = false;
                }
            },
            // 批量删除(num:选中的个数)
            lotsDelete(num){
                if(num == 0){
                    return;
                }
                this.$message.closeAll();
                this.$message.success('删除成功!');
            },
            // 分页器更改页数
            handleCurrentChange(val){
                console.log(val);
            },
            // 数据表格操作
            // 编辑商品
            updataData(row){
                this.isUpDataShow = true;
                $("#updataShowShopname").val(row.name);
                $("#updataShowPrice").val(row.price);
                $("#updataShowNumber").val(row.province);
                setTimeout(()=>{
                    $("#updataShowShopname").val(row.name);
                    $("#updataShowPrice").val(row.price);
                    $("#updataShowNumber").val(row.province);
                },100);
            },
            // 提交编辑商品信息
            UpDataSubmit(){
                // 取消编辑框
                this.isUpDataShow = false;
                // 显示成功弹框
                this.isUpDataSuccess = true;
                setTimeout(()=>{
                    // 隐藏成功弹框
                    this.isUpDataSuccess = false;
                },800);
            },
            // 取消编辑框
            UpDataShowN(){
                this.isUpDataShow = false;
            },
            handleClick(row) {
                alert(row.name);
            },
            // 头部选择框
            HeaderSelect(index){
                this.global.startLoading();
                setTimeout(()=>{
                    this.global.endLoading();
                    this.HeaderIndex = index;
                },500);
            },
            // 跳转发布商品
            toGoodsOn(){
                this.$router.push("/goodsOn");
            }
        },
        mounted(){
            this.global.startLoading();
            this.global.endLoading();
        }
    }
</script>

<style scoped>

    .myBabyHeader{
        width:1015px;
        height:55px;
        background:#FFFFFF;
        font-size: 0;
    }
    .myBabyHeader p{
        display: inline-block;
        width: 150px;
        font-size:16px;
        font-family:"PingFang-SC-Medium";
        font-weight:500;
        line-height: 51px;
        text-align: center;
        border-left: 1px solid #E6E6E6;
        border-top: 4px solid #FFFFFF;
        cursor: pointer;
    }
    .myBabyHeader p:nth-child(1){
        border-left: none;
    }
    .myBabyHeader .myBabyHeaderPS{
        background: #F5F5F5;
        color: #2A91FE;
        border-top: 4px solid #2A91FE;
    }
    /* 中间搜索框 */
    .myBabyQuery{
        background: #FFFFFF;
    }
    /* 搜索框第一行 */
    .myBabyQueryOne{
        display: flex;
        justify-content: space-around;
        padding: 35px 0 25px;
        margin-top: 30px;
    }
    .QueryOneDiv{
        width: 24%;
        height: 30px;
        line-height: 30px;
    }
    .QueryOneDiv span{
        font-size:14px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:#333333;
        margin: 0 10px;
    }
    .QueryOneDiv input{
        width: 150px;
        height: 30px;
        text-indent: 10px;
        font-size: 15px;
        color: #000000;
        font-family:"PingFang-SC-Regular";
        border:1px solid #E0E0E0;
    }
    .QueryOneDivPrice span:nth-child(3){
        margin: 0;
    }
    #myBabyPriceA,
    #myBabyPriceB{
        width: 60px;
    }

    /* 搜索框第二行 */
    .myBabyQueryTwo{
        margin-left: 80px;
    }
    .myBabyQueryTwo span{
        display: inline-block;
        width:60px;
        height:30px;
        line-height: 30px;
        font-size:12px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:#333333;
        text-align: center;
        background:#F5F5F5;
        border:1px solid #E0E0E0;
        border-radius:5px;
        margin: 10px 20px 50px 10px;
        cursor: pointer;
    }
    .myBabyQueryTwo span:active{
        color:#FEFEFE;
        background:linear-gradient(4deg,rgba(231,38,27,1),rgba(253,64,11,1));
        box-shadow:0px 4px 7px 0px rgba(233,40,26,0.3);
    }
    /* 搜索框第三行 */
    .myBabyQueryThree{
        font-family:"PingFang-SC-Regular";
        padding-bottom: 20px;
    }
    .myBabyQueryThree span:nth-child(1){
        display: inline-block;
        width:100px;
        height:30px;
        line-height: 30px;
        text-align: center;
        color: #000000;
        font-weight:400;
        background:#F5F5F5;
        border:1px solid #E0E0E0;
        border-radius:5px;
        margin-left: 42px;
    }
    .myBabyQueryThreeIsDelete1{
        cursor:not-allowed;
    }
    .myBabyQueryThreeIsDelete2{
        cursor: pointer;
    }
    .myBabyQueryThree .myBabyQueryThreeIsDelete2:active{
        color:#FEFEFE;
        background:linear-gradient(4deg,rgba(231,38,27,1),rgba(253,64,11,1));
        box-shadow:0px 4px 7px 0px rgba(233,40,26,0.3);
    }
    .myBabyQueryThree span:nth-child(2){
        font-size:12px;
        font-weight:400;
        line-height: 30px;
        color:#666666;
        margin-left: 20px;
    }
    .myBabyQueryThree span:nth-child(3){
        font-size:12px;
        line-height: 30px;
        font-weight:400;
        color:#333333;
        float: right;
        margin-right: 30px;
    }


    /* 数据表格 */
    .myBabyContent{
        height: 630px;
        background: #FFFFFF;
    }
    .myBabyDataList{
        max-height: 550px;
        overflow: auto;
        margin-bottom: 20px;
    }
    /* 分页器 */
    #pagination{
        margin-right: 30px;
    }
    /* 表格里的内容 */
    /* 第一列,商品名称 */
    .ListOneLeft{
        display: inline-block;
        width: 80px;
        height: 80px;
        margin-right: 11px;
        float: left;
        padding-top: 10px;
        margin-bottom: 10px;
    }
    .ListOneRight{
        display: inline-block;
        font-family:"PingFang-SC-Regular";
        padding-top: 10px;
    }
    .ListOneRight p:nth-child(1){
        height: 50px;
        overflow: hidden;
        color: #2A91FE;
        font-size: 14px;
        width: 300px;
    }
    .ListOneRight p:nth-child(2){
        font-size:12px;
        font-weight:400;
        color:#666666;
    }
    /* 第二列价格 */
    .ListTwo p{
        color: #E7261B;
        font-family: PingFang-SC-Medium;
    }
    /* 第四列创建时间 */
    /* 出售中 */
    .ListThree .ListThreeB{
        color: #E7261B;
    }
    /* 仓库中 */
    .ListThree .ListThreeC{
        color: #F5B62E;
    }

    /* 第五列操作 */
    .ListFour p{
        font-size:12px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        line-height: 50px;
    }
    .ListFour p span{
        cursor: pointer;
        color:#2A91FE;
    }

    /* 修改商品弹框 */
    .updataShop{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: rgba(204,204,204,0.5);
        display: flex;
        justify-content: center;
        align-items:center;
    }
    .updataContent{
        position: relative;
        width:804px;
        height:280px;
        padding: 15px 23px;
        background:#FFFFFF;
        box-shadow:0px 2px 4px 0px rgba(204,204,204,0.5);
        opacity: 1;
    }
    .updataContentA span:nth-child(1){
        font-size:16px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:#666666;
    }
    .updataContentA span:nth-child(2){
        float: right;
        font-size: 28px;
        cursor: pointer;
    }
    .updataContentB{
        height: 40px;
        margin-top: 20px;
    }
    .updataContentB p{
        display: inline-block;
        width: 50px;
        text-align: right;
        color: #2A91FE;
        margin-right: 10px;
    }
    .updataContentB input{
        width:500px;
        height:32px;
        font-size:14px;
        color: #333333;
        text-indent: 10px;
        background:#FFFFFF;
        border:1px solid #2A91FE;
    }
    .updataContentC{
        height: 40px;
        margin-top: 25px;
    }
    .updataContentC p{
        display: inline-block;
        width: 50px;
        color: #2A91FE;
        text-align: right;
        margin-right: 10px;
    }
    .updataContentC input{
        width:200px;
        height:32px;
        font-size:14px;
        color: #333333;
        text-indent: 10px;
        background:#FFFFFF;
        border:1px solid #2A91FE;
        margin-right: 5px;
    }
    .updataContentD{
        height: 40px;
        margin-top: 25px;
    }
    .updataContentD p{
        display: inline-block;
        width: 50px;
        color: #2A91FE;
        text-align: right;
        margin-right: 10px;
    }
    .updataContentD input{
        width:200px;
        height:32px;
        font-size:14px;
        color: #333333;
        text-indent: 10px;
        background:#FFFFFF;
        border:1px solid #2A91FE;
        margin-right: 5px;
    }
    .updataContentE{
        position: absolute;
        bottom: 30px;
        right: 20px;
    }
    .updataContentE span{
        display: inline-block;
        width:60px;
        height:30px;
        line-height: 30px;
        text-align: center;
        font-size:12px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:#333333;
        background:#F5F5F5;
        border:1px solid #E0E0E0;
        border-radius:5px;
        margin-right: 10px;
        cursor: pointer;
    }
    .updataContentE span:active{
        color:#FEFEFE;
        background:linear-gradient(4deg,rgba(231,38,27,1),rgba(253,64,11,1));
        box-shadow:0px 4px 7px 0px rgba(233,40,26,0.3);
    }

    /* 编辑商品提交成功提示弹框 */
    .upDataSuccessNone{
        display: none;
        width:240px;
        height:140px;
        background:rgba(94,94,94,1);
        border-radius:5px;
        position: fixed;
        z-index: 20;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .upDataSuccessBlock{
        display: block;
        width:240px;
        height:140px;
        background:rgba(94,94,94,1);
        border-radius:5px;
        position: fixed;
        z-index: 20;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .upDataSuccessBlock i{
        font-size: 50px;
        color: green;
        opacity: 0.8;
        margin-top: 20px;
    }
    .upDataSuccessBlock p{
        font-size:12px;
        font-family:"PingFang-SC-Medium";
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height:40px;
    }

    /* 无数据显示框 */
    .noDataList{
        width:1014px;
        height:827px;
        background:rgba(255,255,255,1);
        margin-top: 30px;
        text-align: center;
    }
    .noDataListA{
        width: 304px;
        height: 234px;
        margin: 90px auto 0;
    }
    .noDataListB{
        font-size:16px;
        font-family:"PingFang-SC-Medium";
        font-weight:500;
        color:rgba(0,0,0,1);
        text-shadow:0px 7px 98px rgba(145,34,0,0.4);
    }
    .noDataListC{
        width:138px;
        height:32px;
        line-height: 32px;
        text-align: center;
        border:2px solid rgba(231,38,27,1);
        border-radius:16px;
        font-size:16px;
        font-family:"PingFang-SC-Bold";
        font-weight:bold;
        color:rgba(231,38,27,1);
        text-shadow:0px 7px 98px rgba(145,34,0,0.4);
        margin: 20px auto 0;
        cursor: pointer;
    }
</style>
